<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-image: url(../JS素材/flash_sale.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    
    * {
        color: red;
        text-align: center;
    }
    #div1 {
        width: 36px;
        height: 36px;
        border: skyblue 1px solid;
        text-align: center;
        position: absolute;
        margin-top: 600px;
        margin-left: 720px;
    }
    #div2 {
        width: 36px;
        height: 36px;
        border: skyblue 1px solid;
        text-align: center;
        position: absolute;
        margin-top: 600px;
        margin-left: 780px;
    }
    #div3 {
        width: 36px;
        height: 36px;
        border: skyblue 1px solid;
        text-align: center;
        position: absolute;
        margin-top: 600px;
        margin-left: 840px;
    }
    #div4 {
        width: 36px;
        height: 36px;
        border: skyblue 1px solid;
        text-align: center;
        position: absolute;
        margin-top: 600px;
        margin-left: 900px;
    }
</style>

<body>
    <div id="div1">
        10天
    </div>
    <div id="div2">
        1时
    </div>
    <div id="div3">
        11分
    </div>
    <div id="div4">
        11秒
    </div>
    <script>
        var min = 11;
        var miao = 11;
        var hour = 1;
        var day = 10;
        var time = document.getElementById('div4');
        var mint = document.getElementById('div3');
        var hours = document.getElementById('div2');
        var date = document.getElementById('div1');
        setInterval(function() {
            miao--;
            if (miao == -1) {
                miao = 59;
                time.innerHTML = miao + '秒';
                min--;
                mint.innerHTML = min + '分';
                if (min == -1) {
                    min = 59;
                    mint.innerHTML = min + '分';
                    hour--;
                    hours.innerHTML = hour + '时';
                } else if (min < 10) {
                    mint.innerHTML = '0' + min + '分'
                } else if (hour < 10) {
                    hours.innerHTML = '0' + hour + '时'
                } else {
                    hours.innerHTML = hour + '时';
                }
                if (hour == -1) {
                    hour = 23;
                    hours.innerHTML = hour + '时';
                    day--;
                    date.innerHTML = day + '天';

                } else if (day < 10) {
                    date.innerHTML = '0' + day + '天';
                } else {
                    date.innerHTML = day + '天';
                }
                if (day == -1) {
                    date.innerHTML = '0' + day + '天';
                }
            } else if (miao < 10) {
                time.innerHTML = '0' + miao + '秒'
            } else {
                time.innerHTML = miao + '秒';
            }
        }, 0.01)
    </script>
</body>




</html>